<template>
	<view class="main-page">
		<view class="column-container width-100p" v-if="dataList.length > 0">
			<view class="header-box">
				<text class="number-text font-999-26">序号</text>
				<text class="name-text font-999-26">员工姓名</text>
				<text class="mobile-text font-999-26">联系电话</text>
				<text class="open-text font-999-26" style="text-align: center;">账号权限</text>
				<text class="action-text font-999-26 mr-30" style="text-align: right;">操作</text>
			</view>
			<view class="data-item" v-for="(item , index) in dataList" :key="index">
				<view class="divider"></view>
				<text class="number-text font-666-28">{{index + 1}}</text>
				<view class="row-container name-text">
					<text class="font-333-28 font-weight-600 mr-6">{{item.userName}}</text>
					<image class="wh-28" src="../../static/common/ic_female.png" v-if="item.sex == 0"></image>
					<image class="wh-28" src="../../static/common/ic_male.png" v-if="item.sex == 1"></image>
				</view>
				<text class="mobile-text">{{hideMiddleNumber(item.mobile)}}</text>
				
				<view class="open-text row-container-center" @click="handleClickIsOpen(item)">
					<image class="switch-ic" v-if="item.status == 1"
					 src="../../static/common/ic_switch_open.png"></image>
					<image class="switch-ic" v-else
					 src="../../static/common/ic_switch_close.png"></image>
				</view>
				
				<view class="action-text row-container-end" @click="handleClickAction(item , index)">
					<image class="wh-44" src="../../static/common/ic_more.png"></image>
				</view>
				
				
				<!-- <view class="action-text row-container-end" @click="handleClickEdit(item)">
					<image class="wh-44" src="../../static/common/ic_more.png"></image>
				</view> -->
			</view>
		
		</view>
		<NoData v-else class="width-100p" style="margin-top: 400rpx;" 
		hint="您还没有添加员工账号，快去添加吧"></NoData>
		
		<view class="bottom-box" @click="showAddWindow = true">
			<text class="red-btn mt-16">+ 添加员工账号</text>
		</view>
		
		<view class="window-main" v-if="showAddWindow">
			<view class="add-window">
				<text class="font-333-36 font-weight-600">{{editUserId ? '编辑员工' : '添加员工'}}</text>
				<view class="row-container mt-40 width-100p">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">员工姓名</text>
				</view>
				<input
					v-model="commitParams.userName"
					class="input-box"
					placeholder="请输入员工姓名"
					placeholder-class="font-999-28"
				/>
				<view class="row-container mt-20 width-100p">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">员工性别</text>
				</view>
				<picker
					mode="selector"
					:range="sexList"
					range-key="label"
					@change="changeUserSex"
					v-model="commitParams.sex"
					class="width-100p"
				>
					<view class="row-container-row-between input-box">
						<text class="font-333-28">{{sexLabel?sexLabel:'请选择性别'}}</text>
						<image src="../../static/common/ic_arrow_right.png" class="wh-20"></image>
					</view>
				</picker>
				<view class="row-container mt-20 width-100p">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">联系电话</text>
				</view>
				<input
					v-model="commitParams.mobile"
					class="input-box"
					placeholder="请输入员工联系电话"
					placeholder-class="font-999-28"
					type="number"
				/>
				
				<view class="row-container width-100p mt-40">
					<text class="add-cancel" @click="handleAddCancel">取消</text>
					<text class="add-confirm" style="background: #F94C4B;"
					 v-if="commitParams.userName && commitParams.mobile"
					  @click="handleConfirmAdd">确定</text>
					<text class="add-confirm"  v-else>确定</text>
				</view>
				
				
			</view>
		</view>
		
		<!-- 停用启用确认弹窗 -->
		<view class="window-main" v-show="showOpenWindow">
			<view class="reset-window">
				<text class="font-333-36 font-weight-600">{{clickOpenData.status == 1 ? '确认停用吗？' : '确认启用吗？'}}</text>
				<view class="row-container mt-40 width-100p">
					<text class="cancel-btn" @click="showOpenWindow = false">取消</text>
					<text class="confirm-btn" @click="changeIsOpen">确定</text>
				</view>
			</view>
		</view>
		
		<!-- 操作菜单 -->
		<view class="popup-box" v-if="showActionPopup" :style="{top:menuTop+'rpx'}">
			<image class="popup-bg" src="../../static/common/bg_action_sheet.png"></image>
			<view class="row-container-center width-100p mt-30" style="z-index: 300;"
			@click="handleClickEdit">
				<image class="wh-30" src="../../static/common/ic_edit_black.png"></image>
				<text class="font-333-32 font-weight-600 ml-24">编辑</text>
			</view>
			<view class="popup-divider"></view>
			<view class="row-container-center width-100p" style="z-index: 300;"
			@click="handleCallNumber">
				<image class="wh-30" src="../../static/common/ic_phone_black.png"></image>
				<text class="font-333-32 font-weight-600 ml-24">电话</text>
			</view>
			<view class="popup-divider"></view>
			<view class="row-container-center width-100p" style="z-index: 300;"
			@click="gotoEmployeeRights">
				<image class="wh-30" src="../../static/mine/ic_employee_rights.png"></image>
				<text class="font-333-32 font-weight-600 ml-24">权限</text>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import NoData from '../../components/nodata.vue'
	
	export default {
		data() {
			return {
				dataList:[],
				showAddWindow:false,
				
				commitParams:{
					id:'', // 编辑员工的id
					userName:'' , // 添加或编辑的员工姓名
					sex:0,
					mobile:'' ,
				},
				sexLabel:'',
				sexList:[{'value' : 0 , 'label' : '女'} , {'value' : 1 , 'label' : '男'}],
				
				page:1,
				hasMoreData:false,
				
				clickOpenData:null , // 点击的启用禁用item
				showOpenWindow:false,
				
				showActionPopup:false,
				clickActionData:null , //点击操作菜单的item
				menuTop:0 , // 菜单位置
			}
		},
		
		components:{
			NoData
		},
		
		onLoad() {
			this.loadDataList()
		},
		
		onPullDownRefresh() {
			this.page = 1
			this.loadDataList()
		},
		
		onReachBottom() {
			if (this.hasMoreData){
				this.page ++
				this.loadDataList()
			}
		},
		
		methods: {
			closeActionPopup(){
				this.showActionPopup = false
				this.clickActionData = null
			},
			
			loadDataList(){
				let that = this
				this.http({
					url:'/user/staffList',
					method:'POST',
					data:{
						pageNo: that.page,
						pageSize: 20,
						status : -1
					},
					success(res){
						if (res.code == 200){
							if (that.page == 1){
								that.dataList = res.data
							} else{
								that.dataList = [...that.dataList, ...res.data]
							}
							that.hasMoreData = res.data.length >= 10
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			changeUserSex(e){
				this.commitParams.sex = this.sexList[e.detail.value].value
				this.sexLabel = this.sexList[e.detail.value].label
			},
			
			handleAddCancel(){
				this.showAddWindow = false
				this.commitParams.userName = ""
				this.commitParams.id = ""
				this.commitParams.mobile = ""
				this.commitParams.sex = 0
				this.sexLabel = ""
			},
			
			handleConfirmAdd(){
				let that = this
				this.http({
					url:'/user/saveOrUpdatePosUser',
					method:'POST',
					header:{
						"content-type": "application/json",
						'Authorization': uni.getStorageSync("ap_token")
					},
					data:this.commitParams,
					success(res){
						if (res.code == 200){
							that.showAddWindow = false
							that.commitParams.userName = ""
							that.commitParams.mobile = ""
							that.commitParams.id = ""
							that.commitParams.sex = 0
							that.page = 1
							that.loadDataList()
							
							uni.$emit('refreshEmployeeList')
						} else{
							setTimeout(()=>{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							} , 500)
						}
					},
					failed(e){
					}
				})
			},
			
			handleClickIsOpen(item){
				this.clickOpenData = item
				this.showOpenWindow = true
			},
			
			changeIsOpen(){
				if (!this.clickOpenData) return
				let that = this
				let type = 0
				if (this.clickOpenData.status == 0){
					type = 1
				}
				this.http({
					url:"/user/updateStaffStatus",
					method:"POST",
					data:{
						staffId : this.clickOpenData.id,
						type : type
					},
					success(data){
						if (data.code == 200){
							that.clickOpenData = null
							that.showOpenWindow = false
							that.page = 1
							that.loadDataList()
							uni.$emit('refreshEmployeeList')
						}
					},
					failed(e){
						
					}
				})
			},
			
			//点击修改
			handleClickEdit(){
				if (!this.clickActionData) return
				this.commitParams.id = this.clickActionData.id
				this.commitParams.userName = this.clickActionData.userName
				this.commitParams.sex = this.clickActionData.sex
				this.commitParams.mobile = this.clickActionData.mobile
				if (this.clickActionData.sex == 0){
					this.sexLabel = '女'
				} else if (this.clickActionData.sex == 1){
					this.sexLabel = '男'
				}
				this.showActionPopup = false
				this.showAddWindow = true
				this.clickActionData = null
			},
			
			//点击拨打电话
			handleCallNumber(){
				if (!this.clickActionData || !this.clickActionData.mobile) return
				this.showActionPopup = false
				uni.makePhoneCall({
					phoneNumber:this.clickActionData.mobile,
				})
				this.clickActionData = null
			},
			
			//点击操作菜单
			handleClickAction(item , index){
				this.menuTop = index * 120 + 150
				if (this.showActionPopup){
					this.closeActionPopup()
				} else{
					this.clickActionData = item
					this.showActionPopup = true
				}
			},
			
			hideMiddleNumber(number){
				if (number && number.length == 11){
					return number.substring(0 , 3) + "****" + number.substring(7 , 11)
				} else{
					return number
				}
			},
			
			//员工权限
			gotoEmployeeRights(){
				if (!this.clickActionData) return
				this.showActionPopup = false
				uni.navigateTo({
					url:'./authority?name=' + this.clickActionData.userName 
					+ "&staffId=" + this.clickActionData.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.header-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #F5F5F5;
		width: 100%;
		height: 80rpx;
	}
	
	.number-text{
		width: 52rpx;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0rpx 30rpx;
		flex-shrink: 0;
	}
	
	.name-text{
		width: 134rpx;
		margin-left: 20rpx;
		flex-shrink: 0;
	}
	
	.mobile-text{
		margin-left: 30rpx;
		width: 191rpx;
		flex-shrink: 0;
	}
	
	.open-text{
		margin-left: 30rpx;
		width: 121rpx;
	}
	
	.action-text{
		margin: 0rpx 30rpx;
		width: 52rpx;
	}
	
	.data-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 120rpx;
		position: relative;
		background: white;
		
		.switch-ic{
			width: 79rpx;
			height: 45rpx;
		}
		
		.divider{
			width: calc(100% - 60rpx);
			height: 1rpx;
			background: #E8E8E8;
			margin: 0rpx 30rpx;
			position: absolute;
			bottom: 0;
		}
	}
	
	
	.bottom-box{
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		height: 180rpx;
		background: white;
		position: fixed;
		bottom: 0;
		z-index: 100;
	}
	
	.add-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 220rpx);
		margin: 0rpx 70rpx;
		padding: 40rpx;
		background: white;
		border-radius: 16rpx;
		
		.input-box{
			background: #F5F5F5;
			border-radius: 10rpx;
			margin-top: 14rpx;
			width: calc(100% - 48rpx);
			padding: 0rpx 24rpx;
			height: 88rpx;
			color: #333333;
			font-size: 28rpx;
		}
		
		.add-cancel{
			width: 200rpx;
			height: 85rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			text-align: center;
			line-height: 85rpx;
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
			margin-right: 30rpx;
		}
		
		.add-confirm{
			flex-grow: 1;
			height: 85rpx;
			background: rgba(249, 76, 75, 0.5);
			border-radius: 10rpx;
			text-align: center;
			line-height: 85rpx;
			color: white;
			font-size: 32rpx;
			font-weight: 600;
		}
	}
	
	.reset-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 190rpx);
		margin: 0rpx 70rpx;
		padding: 40rpx 25rpx;
		background: white;
		border-radius: 30rpx;
		
		.cancel-btn{
			height: 85rpx;
			flex-grow: 1;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin: 0rpx 15rpx;
			color: #333333;
			font-size: 32rpx;
			text-align: center;
			line-height: 85rpx;
		}
		
		.confirm-btn{
			height: 85rpx;
			flex-grow: 1;
			background: #F94C4B;
			border-radius: 10rpx;
			margin: 0rpx 15rpx;
			color: white;
			font-size: 32rpx;
			text-align: center;
			line-height: 85rpx;
		}
	}
	
	.popup-box{
		display: flex;
		flex-direction: column;
		width: 182rpx;
		height: 252rpx;
		align-items: center;
		position: relative;
		position: absolute;
		right: 30rpx;
		z-index: 200;
		
		.popup-bg{
			width: 100%;
			height: 100%;
			position: absolute;
		}
		
		.popup-divider{
			width: 95rpx;
			height: 1rpx;
			background: #EDEDED;
			margin-left: 87rpx;
			margin-top: 19rpx;
			margin-bottom: 15rpx;
			z-index: 300;
		}
	}
	
	
</style>
